<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 
      第二种方式:
        - 将样式编写到head中的style标签里
                然后通过css选择器来选中元素并为其设置各种样式。
                可以为多个标签设置样式,并且修改时只需要修改一处即可全部应用。
            - 内部样式表更加方便对样式进行复用
            - 问题:
                  我们的内部样式表只能对一个网页起作用,
                        它里面的样式不能跨页面进行复用
            -->
    <!-- <style>
       p {
         color: yellow;
         font-size: 50px;
       }
     </style> -->
    <!-- 
        第三种方式  (外部样式表) 最佳使用方式(开发中使用最多)
              - 可以将CSS样式编写到一个外部的CSS文件中
                  然后通过link标签来引入外部的CSS文件
              - 外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其进行引用
                使样式可以在不同的页面之间进行复用
              - 将样式编写到外部的CSS文件中,可以最大限度的使用浏览器的缓存机制,
                从而加快网页的加载速度,提高用户的体验。

      -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- 
            网页分成三个部分:
                结构(HTML)
                表现(CSS)
                行为(JavaScript)
            
            CSS
                - 层叠样式表
                - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式。
                      而最终我们能看到的只是网页的最上边一层。
                - 总之一句话，CSS用来设置网页中元素的样式
         -->
    <!-- 
      权限上来说，第一种方式大于第二种方式大于第三种方式
     -->

    <!-- 
           使用CSS来修改元素的样式:
              第一种方式(内联样式,行内样式):
                - 在标签内部通过style属性来设置元素的样式
                问题:
                  使用内联样式,样式只能对一个标签生效
                      如果希望影响多个元素必须在每一个元素中都复制一遍
                      并且当样式发生变化时,我们必须要一个一个的修改,非常的不方便
                - 注意:开发时绝对不要使用内联样式    

          -->
    <!-- <p style="color: red; font-size: 60px">少小离家老大回,乡音无改鼻毛衰</p> -->

    <!-- <p style="color: red;">今天天气真不错!</p> -->

    <!-- 第二种方式 -->
    <!-- <p>第二种方式</p>
    <p>第二种方式</p>
    <p>第二种方式</p> -->

    <!-- 第三种方式 -->
    <p>第三种方式</p>


  </body>
</html>
